<template>
  <el-row justify="center">
    <el-col :xs="24" :sm="24" :lg="24" class="descriptions">
      <div style="overflow: auto">
        <el-descriptions title="个人信息" :column=" mobile?1 :2" border>
          <el-descriptions-item label="用户名">
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            {{ userInfo.realname }}
          </el-descriptions-item>
          <el-descriptions-item label="账号名">
            <template slot="label">
              <i class="el-icon-user-solid"></i>
              账号名
            </template>
            {{ userInfo.username }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            <template slot="label">
              <i class="el-icon-s-promotion"></i>
              邮箱
            </template>
            {{ userInfo.email }}
          </el-descriptions-item>
          <el-descriptions-item label="所属项目">
            <el-tag size="small">{{ userInfo.project_str || '暂无' }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="el-wrap">
      <el-skeleton class="skeleton-wrap" :rows="7" :loading="chartsLoading">
        <el-card>
          <charts-base :option="chartsData.pie_chart" :dom-id="'main'"></charts-base>
        </el-card>
      </el-skeleton>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" class="el-wrap el-wrap2">
      <el-skeleton class="skeleton-wrap" :rows="7" animated :loading="chartsLoading">
        <el-card>
          <charts-base :option="chartsData.bar_chart" :dom-id="'main1'"></charts-base>
        </el-card>
      </el-skeleton>
    </el-col>
  </el-row>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import ChartsBase from "@/views/Home/components/ChartsBase.vue";
import {useDevice} from "@/hooks/web/useDevice";
import {useStorage} from "@/hooks/web/useStorage";

const {getStorage} = useStorage()
const userInfo = getStorage('userInfo')
const {mobile} = useDevice()
let chartsLoading = ref(true)
import {getCharts} from "@/api/common";

const chartsData = reactive({
  pie_chart: {},
  bar_chart: {},
})

onMounted(() => {
  getCharts().then(res => {
    chartsLoading.value = false
    console.log(res);
    let seriesData = []
    res.data.bar_chart.series.forEach((item) => {
      seriesData.push(
          {
            "name": item.name,
            "type": "bar",
            "stack": "总量",
            "barMaxWidth": 35,
            "barGap": "10%",
            "itemStyle": {
              "normal": {
                "label": {
                  "show": true,
                  "textStyle": {
                    "color": "#fff"
                  },
                  "position": "inside",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            "data": item.data
          }
      )
    })

    seriesData.push({
      name: '总计',
      type: 'line',
      stack: 'total',
      symbol: 'circle',
      data: res.data.bar_chart.amount
    })

    console.log('bar_chart', res.data.bar_chart);

    nextTick(() => {
      chartsData.pie_chart = {
        title: {
          text: '学生报名统计'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: res.data.pie_chart.legend
        },
        series: [
          {
            name: '人数统计',
            type: 'pie',
            roseType: 'radius',
            radius: '60%',
            center: ['50%', '47%'],
            data: res.data.pie_chart.series,
            animationEasing: 'cubicInOut',
            animationDuration: 1000
          }
        ]
      }
      chartsData.bar_chart = {
        "tooltip": {
          "trigger": "axis",
          "axisPointer": {
            "type": "shadow",
            textStyle: {
              color: "#fff"
            }

          },
        },
        "grid": {
          "borderWidth": 0,
          "top": 90,
          "bottom": 25,
          textStyle: {
            color: "#fff"
          }
        },
        "legend": {
          x: '4%',
          top: '8%',
          textStyle: {
            color: '#90979c',
          },
          "data": res.data.bar_chart.name
        },


        "calculable": true,
        "xAxis": [{
          "type": "category",
          "axisLine": {
            lineStyle: {
              color: '#90979c'
            }
          },
          "splitLine": {
            "show": false
          },
          "axisTick": {
            "show": false
          },
          "splitArea": {
            "show": false
          },
          "axisLabel": {
            "interval": 0,

          },
          "data": res.data.bar_chart.data,
        }],
        "yAxis": [{
          "type": "value",
          "splitLine": {
            "show": false
          },
          "axisLine": {
            lineStyle: {
              color: '#90979c'
            }
          },
          "axisTick": {
            "show": false
          },
          "axisLabel": {
            "interval": 0,

          },
          "splitArea": {
            "show": false
          },

        }],
        // "dataZoom": [{
        //   "show": true,
        //   "height": 15,
        //   "xAxisIndex": [
        //     0
        //   ],
        //   bottom: 30,
        //   "start": 0,
        //   "end": 100,
        //   handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //   handleSize: '110%',
        //   handleStyle: {
        //     color: "#d3dee5",
        //
        //   },
        //   textStyle: {
        //     color: "#fff"
        //   },
        //   borderColor: "#90979c"
        // }, {
        //   "type": "inside",
        //   "show": true,
        //   "height": 15,
        //   "start": 1,
        //   "end": 35
        // }],
        "series": seriesData
      }
    })
  })
})

</script>
<style scoped>

.el-wrap {
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
}

.descriptions {
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
}

.skeleton-wrap {
  height: 340px;
}

</style>